<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  import {mapActions, mapState, mapGetters} from 'vuex'

  export default {

    mounted () {
      console.log(this.$store)
    },

    // 简化为：
    // computed: {
    //   count () {
    //     return this.$store.state.count// store.js中定义
    //   },
    //   evenOrOdd () {
    //     return this.$store.getters.evenOrOdd// store.js中定义
    //   }
    // },
    // 简化为：
    computed: {
      ...mapState(['count']),// 默认为两边名称一致
      ...mapGetters({evenOrOdd: 'evenOrOdd2'})// 对于不同的可以映射
    },

    // methods: {// 主要要和dispatch中名称一一对应，可以理解为讲操作逻辑放入store.js文件中进行管理
    //   increment () {
    //     this.$store.dispatch('increment')
    //   },
    //   decrement () {
    //     this.$store.dispatch('decrement')
    //   },
    //   incrementIfOdd () {
    //     this.$store.dispatch('incrementIfOdd')
    //   },
    //   incrementAsync () {
    //     this.$store.dispatch('incrementAsync')
    //   }
    // }

    // 简化为：
    methods: {
      ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
    }

  }

</script>

<style>

</style>
